<template>
  <div class="managementx">
    <Title :title='leave'></Title>
    <div>
      <div>
        <el-input
          style="width: 200px"
          v-model="proposer"
          placeholder="请输入申请人姓名"
        ></el-input>
        <el-button type="primary" @click="souFun">查询</el-button>
        <el-button type="primary" @click="chongFun">重置</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="proposer" label="申请人" width="150">
        </el-table-column>
        <el-table-column prop="evection" label="请假事由" width="120">
        </el-table-column>
        <el-table-column prop="leaveTime" label="请假开始时间" width="120">
          <template #default="scope">
            {{ $filters.currencyUSD(scope.row.leaveTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="请假结束时间" width="120">
          <template #default="scope">
            {{ $filters.currencyUSD(scope.row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="needTime" label="总需时长" width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="approval"
          label="审批人"
          width="·120"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="send"
          label="抄送人员"
          width="·120"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import {list} from '../../api/leave/evenction'
import {ref ,reactive} from 'vue'
import Title from '../../components/title.vue'
export default {
  components:{
        Title
    },
  data() {
    return {
      leave:'请假管理'
    };
  },
  setup() {
    const page=ref(1)
    const proposer=ref('')
    const limit=ref(8)
    const tableData=reactive([])
    const listFun=()=>{
      list({page:page.value,limit:limit.value,proposer:proposer.value}).then((res)=>{
        if(res.status==200){
          res.data.forEach(v => {
            tableData.push(v)
          });
          console.log(tableData);
        }
      })
    }
    listFun()
    const handleClick = (row) => {
      console.log(row);
      
    };
    const souFun = () => {
      listFun()
    };
    const chongFun = () => {
      proposer.value = "";
      listFun();
    };
    return{
handleClick,souFun,chongFun,
proposer,tableData
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/scss.scss";
.managementx {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  background: white;
}
.header {
  width: 100%;
  height: 30px;
  border-left: $border-left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    margin-left: 15px;
  }
}
</style>